{% extends 'base.html' %}

{% load static %}

{% block title %}
    用户中心
{% endblock %}

{% block content %}
    {% if msg %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>{{ msg }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endif %}
    <h3>用户中心</h3>
    <div class="row">
        <div class="col-2">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="nav-link list-group-item list-group-item-action active" id="list-home-list"
                   data-toggle="list" href="#list-home" role="tab" aria-controls="home">个人信息</a>
                <a class="nav-link list-group-item list-group-item-action" id="list-profile-list"
                   data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">全部订单</a>
                <a class="nav-link list-group-item list-group-item-action" id="list-messages-list"
                   data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">收货地址</a>
            </div>
        </div>
        <div class="col-10">
            <div class=" tab-content" id="nav-tabContent">
                <div class=" tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                    <h5 class="center card-title ">基本信息</h5>
                    <ul class="list-group">
                        <li class="list-group-item " style="height:150px">头像：
                            {% csrf_token %}
                            <img id="icon1" style="width:90px; height:90px; border-radius: 90px"
                                 src="/static{{ MEDIA_URL }}{{ request.user.icon }}" alt=""><br>

                            <input type="button" class="offset-1 btn btn-primary" value="更换头像"
                                   style="position: relative;"/>
                            <input type="file" id="iconfile"
                                   style="top:104px;left:65px;cursor:pointer;position:absolute;opacity:0;">

                        </li>
                        <li class="list-group-item">用户名：{{ user.username }}</li>
                        <li class="list-group-item">邮箱：{{ user.email }}</li>
                        <li class="list-group-item">电话：{{ user.phone }}</li>
                        <li class="list-group-item">
                            <a href="#" class="del" tag="{{ user.id }}">删除</a>
                            <a href="#">修改</a></li>
                    </ul>
                </div>
                <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                    <h5 class="center card-title ">全部订单</h5>
                    <table class="table table-hover">
                        <tr>
                            <td style="width:25%">商品名称</td>
                            <td style="width:25%">价格</td>
                            <td style="width:25%">数量</td>
                            <td style="width:25%">小计</td>
                        </tr>
                    </table>
                    {% csrf_token %}
                    <div id="tbody">
                        {#                        <tr>#}
                        {#                            {% for order in page_obj.object_list %}#}
                        {#                                <div>#}
                        {#                                    <p class="small" style="float:left;margin-right:2em">订单号:{{ order.order_id }}</p>#}
                        {#                                    <p class="small" style="float:left;margin-right:2em">添加时间:{{ order.add_time }}</p>#}
                        {#                                    <p class="small">订单状态:{{ order.status }}</p>#}
                        {#                                </div>#}
                        {#                                <div>#}
                        {#                                    <p class="small" style="float:left;margin-right:2em">#}
                        {#                                        收件人:{{ order.address.receive_user }}</p>#}
                        {#                                    <p class="small" style="float:left;margin-right:2em">联系电话:{{ order.address.phone }}</p>#}
                        {#                                    <p class="small" style="float:left;margin-right:2em">支付方式:{{ order.paymethod }}</p>#}
                        {#                                    <p class="small">收货地址:{{ order.address.receive_address }}</p>#}
                        {#                                </div>#}
                        {#                                <div class="">#}
                        {#                                    <p style="float:left;margin-right:2em">订单商品数量：{{ order.goods_num }}</p>#}
                        {#                                    <p style="float:left;color:red">订单总金额：{{ order.goods_total }}</p>#}
                        {#                                    {% csrf_token %}#}
                        {#                                    <input type="submit" id="pay" class="pay btn btn-success"#}
                        {#                                           style=" padding:0;float: right;height: 2em"#}
                        {#                                           order_id="{{ order.order_id }}" order_status="{{ order.order_status }}"#}
                        {#                                           pay_method="{{ order.pay_method }}" value="去支付">#}
                        {#                                </div>#}
                        {#                                <table class="table table-hover" style="border-bottom: 1px solid black">#}
                        {#                                    {% for ordergoods in order.ordergoods_set.all %}#}
                        {#                                        <tr>#}
                        {#                                            <td style="width:25%">{{ ordergoods.goods.name }}</td>#}
                        {#                                            <td style="width:25%">#}
                        {#                                                ￥<em>{{ ordergoods.goods.price }}</em>/{{ ordergoods.goods.unite }}</td>#}
                        {#                                            <td style="width:25%">{{ ordergoods.number }}</td>#}
                        {#                                            <td style="width:25%">￥<em>{{ ordergoods.price }}</em></td>#}
                        {#                                        </tr>#}
                        {#                                    {% endfor %}#}
                        {#                                </table>#}
                        {#                            {% endfor %}#}
                        {#                        </tr>#}
                    </div>
                    <nav aria-label="Page navigation example">
                        <form id="page" action={% url 'shop:detail' %}>
                            <ul class="pagination justify-content-center">
                                <li class="page-item">
                                    <a class="previous_page page-link" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% for page_num in page_obj.paginator.page_range %}
                                    <li class="page-item"><a class="now_page page-link">{{ page_num }}</a></li>
                                {% endfor %}

                                <li class="page-item">
                                    <a id="total_pages"
                                       class=" page-link disabled">共{{ page_obj.paginator.num_pages }}页</a>
                                </li>
                                <li class="page-item">
                                    <a class="next_page page-link" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </form>
                    </nav>
                </div>
                <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                    <h5 class="center card-title ">收货地址</h5>
                    <div class="site-wrapper">
                        {% if addr %}
                            <dl>
                                <dt>当前地址：</dt>
                                <dd>{{ addr.receive_address }} （{{ addr.receive_user }}收）邮政编码：{{ addr.post_code }}
                                    联系电话：{{ addr.phone }} </dd>
                            </dl>
                        {% else %}
                            <dl>
                                <dt>当前地址：</dt>
                                <dd> 请添加收货地址！</dd>
                            </dl>
                        {% endif %}
                    </div>
                    <form class="form-horizontal" action="{% url 'shop:detail' %}" method="post" id="add_address">
                        <h6 class="center card-title dataTable ">
                            <dl>
                                <dt>添加地址</dt>
                            </dl>
                        </h6>
                        {% csrf_token %}
                        <div class="form-group row">
                            <label for="inputEmail3"
                                   class="col-sm-4 row justify-content-end col-form-label">收件人：</label>
                            <div class="form-inline col-sm-6">
                                <input type="text" class=" form-control col-sm-12" id="receive_user" name="receive_user"
                                       placeholder="收件人">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword3"
                                   class="col-sm-4 row justify-content-end col-form-label">详细地址：</label>
                            <div class="form-inline col-sm-6">
                                <input type="text" class=" form-control col-sm-12" id="receive_address"
                                       name="receive_address"
                                       placeholder="详细地址">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword3"
                                   class="col-sm-4 row justify-content-end col-form-label">邮编：</label>
                            <div class="form-inline col-sm-6">
                                <input type="text" class=" form-control col-sm-12" id="post_code" name="post_code"
                                       placeholder="邮编">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword3"
                                   class="col-sm-4 row justify-content-end col-form-label">联系电话：</label>
                            <div class="form-inline col-sm-6">
                                <input type="text" class=" form-control col-sm-12" id="phone" name="phone"
                                       placeholder="联系电话">
                            </div>
                        </div>
                        <input type="submit" class=" offset-5 btn btn-success" value="提交">
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript">

        $(function () {
            let now_page = 1;
            page_click();
            $('.previous_page').addClass('disabled');
            $('.now_page').first().addClass('active disabled page_this');

            $('.previous_page').click(function () {
                now_page -= 1
                if (now_page < 1) {
                    now_page = 1
                    return false
                } else {
                    $('.page_this').parent().prev().children().click()
                }
            })

            $('.next_page').click(function () {
                let num_pages = $('#total_pages').text()
                now_page += 1
                if (now_page > parseInt(num_pages)) {
                    now_page -= 1
                    return false
                } else {
                    $('.page_this').parent().next().children().click()
                }
            })

            $('.now_page').click(function () {
                now_page = parseInt($(this).text())
                $('.now_page').removeClass('active disabled page_this')
                $(this).addClass('active disabled page_this')
                page_click();
            })

            function page_click() {
                $.getJSON('{% url 'shop:detail' %}', {page: now_page}, function (data) {
                    $('#tbody div').remove()
                    $('#total_pages').html('共' + data.num_pages + '页')
                    if (data.has_previous === true) {
                        $('.previous_page').removeClass('disabled')
                    } else {
                        $('.previous_page').addClass('disabled')
                    }
                    if (data.has_next === true) {
                        $('.next_page').removeClass('disabled')
                    } else {
                        $('.next_page').addClass('disabled')
                    }
                    $('#tbody').append('<div>' + data.new_page + '</div>');
                    $(function () {
                        $('.pay').each(function (i) {
                            var status = $(this).attr('order_status')
                            if (status === '1') {
                                $(this).attr('value', '去付款')
                            } else if (status === '4') {
                                $(this).attr('value', '去评价')

                            } else if (status === '5') {
                                $(this).attr('value', '已完成')
                            }
                        })
                    })
                    $(document).ready(function () {
                        $('.pay').click(function () {
                            var order_id = $(this).attr('order_id')
                            var pay_method = $(this).attr('pay_method')
                            var order_status = $(this).attr('order_status')
                            var csrf = $('input[name="csrfmiddlewaretoken"]').val();

                            if (order_status === '1') {
                                //待支付状态，去支付
                                $.post('{% url 'shop:order_pay' %}', {
                                    order_id: order_id,
                                    pay_method: pay_method,
                                    csrfmiddlewaretoken: csrf
                                }, function (data) {
                                    if (data.status === '200') {
                                        window.open(data.pay_path)

                                        $.post('/check_order/', {
                                            order_id: order_id,
                                            pay_method: pay_method,
                                            csrfmiddlewaretoken: csrf
                                        }, function (data) {
                                            if (data.status === '200') {
                                                alert(data.msg)
                                                location.reload()
                                            } else if (data.status === '401') {
                                                alert(data.msg)
                                            }
                                        })
                                    } else if (data.status === '401') {
                                        alert(data.msg)
                                    }
                                })

                            }
                            else if (order_status === '4') {
                                //待评价，去评价
                                var orderid = parseInt(order_id)
                                location.href = "{% url 'shop:order_comment'  %}?orderid="+orderid
                            }
                            else {
                                alert('请勿重复支付！')
                            }
                        })
                    })
                })
            }
        })
        $(document).ready(function () {
                $("#iconfile").change(function () {
                        var formData = new FormData();
                        formData.append('uid', {{ user.id }});
                        formData.append('icon', $("#iconfile")[0].files[0]);
                        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
                        formData.append('csrfmiddlewaretoken', csrf);
                        $.ajax({
                            url: /upload_icon/,
                            type: 'post',
                            data: formData,
                            dataType: 'json',
                            cache: false,
                            processData: false,
                            contentType: false,
                            success: function displayimg(data) {
                                if (data.msg === 'ok') {
                                    $("#icon").attr("src", "/static{{ MEDIA_URL }}" + data.img_path);
                                    $("#icon1").attr("src", "/static{{ MEDIA_URL }}" + data.img_path);
                                }
                            }
                        })
                    }
                )
            }
        )
    </script>
{% endblock %}